<template>
  <div class="legend">
    <h3>图例</h3>
    <ul>
      <li>
        <input name="legend" type="radio" id="waterPoints" @change="pointerShow=1">
        <label for="waterPoints" class="js-waterPoints">{{water.name}}</label>
      </li>
      <li>
        <input name="legend" type="radio" id="watcherPoint" @change="pointerShow=2">
        <label for="watcherPoint">{{watcher.name}}</label>
        <ul class="legendSencond legendSencond1" :class="{point_show:pointerShow==2}">
          <li v-for="item in watcher.list">
            <input type="checkbox" v-model="item.checked"/><label>{{item.name}}</label>
          </li>
        </ul>
      </li>
      <li>
        <input name="legend" type="radio" id="cars" @change="pointerShow=3"><label for="cars">{{cars.name}}</label>
        <ul class="legendSencond legendSencond2":class="{point_show:pointerShow==3}">
          <li v-for="item in cars.list">
            <input type="checkbox" v-model="item.checked"/><label>{{item.name}}</label>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    props:["waterlist","watcherlist","carlist"],
    data:function () {
      return {
        pointerShow:0
      }
    },
    methods:{

    },
    created:function () {
      this.water=this.waterlist;
      this.watcher=this.watcherlist;
      this.cars=this.carlist
    }
  }
</script>
